Template

Template 的部分，Vue 3 跟 Vue 2 在關防文件上除了排序與樣式的不同，內容幾乎不變，因此這部分可以預測為完全不需要改動。

請注意，有些第三方插件有時會提供一些便捷的功能，例如 Vuetify 的 VDataTable 元件，它可以讓你在板模中可以使用 v-slot:item.foo 這樣的語法，不過這並不是官方的使用方式，這些非官方的用法可能會增加日後升級的成本。

Computed Properties and Watchers

Computed Properties and Watchers 在使用上跟 Vue2 相同，沒差異。

Binding HTML Classes

Css class 的綁定部分 Vue 2 的使用方式完全支援無須修改，有一點不同的是，因為 Vue 3 支援 multiple element root ，因此在這個情境下時，需要指定要將父層的 $attrs 綁到哪一個 root element 上，如下：

<div id="app">
  <my-component class="baz"></my-component>
</div>

const app = Vue.createApp({})

// 注意這個 template 的根是由兩個 element 所組成
app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})

Conditional Rendering

Conditional Rendering Vue 3 內容相較 Vue 2 的文件內容少了 使用 key 控制重用性元素，筆者實際測試使用 Vue 3 執行 Vue 2 官網的範例發現，現在 Vue 3 的確不再需要控制這個 key 屬性，一律都會重新渲染。

List Rendering

在 Vue 2 的文件中，特別提到了在幾個特定情況下 Vue 是沒辦法偵測到變化的，而 Vue 3 的文件也把這個提醒移除了，實際後測試發現，陣列操作中使用 array[index] 的賦值的方式在 Vue 3 中是有效的！

const users = ref([])

users.value[0] = 'Sam'   // 會觸發 render，user 會在 v-for 中出現

陣列操作中使用 array.length = x 的方式也是有效的

const users = ref(['Sam'])

users.value.length = 0  // 會觸發 render，內容消失

物件在初始化後直接賦值也是有效的

const users = ref({
  a: 'Sam'
})

users.value.b = 'Peter'  // 有效，不需要使用 Vue.set(users.value, 'b', 'Peter')

所以以上行為在 Vue 3 中是有效的，讚讚讚！！！
最後，在 List Rendering 的部分，還發現到 Vue 2 特別醒的一件事情：如果在 <ul> 元素中使用元件時，即便該元件的根元素是 <li>，父層也必須要這麼寫：

  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      :key="todo.id"
      :item="todo"
    />
  </ul>

這引發了我的好奇心，為什麼 Vue 3 沒這個問題呢？

後來回去對比 v3 與 v2 的 Lifecycle 流程發現一個地方有所不同，在判斷元件是否有 template 屬性後，如果沒有，Vue 2 會將根元素的 innerHTML 編譯成 template，Vue 3 則是將根元素的 outerHTML 編譯成 template！